/**
* Created by ren on 2016/12/23.
*/
<template>
  <div class='dingtou product'>
    <div :class="{title:true,isHide:_parentThis.dtTit}"><i></i><span>定投产品</span><i></i></div>
    <div style="font-size: 18px;color: #fd8f23;margin-top: 32px;margin-left: 20px">{{dingtouData.productName}}</div>
    <div class="dt-msg">
      <ul>
        <li>
          <div>起投</div>
          <div class="weight">{{(dingtouData.startWeight/1000).toFixed(1)}}g</div>
        </li>
        <div class="line"><img src="../../assets/line.png" alt=""></div>
        <li>
          <div>最新定投</div>
          <div class="weight">{{(dingtouData.lastWeight/1000).toFixed(1)}}g</div>
        </li>
        <div class="line"><img src="../../assets/line.png" alt=""></div>
        <li>
          <div>总共定投</div>
          <div class="weight">{{(dingtouData.sunWeight/1000).toFixed(1)}}g</div>
        </li>
      </ul>
      <div style="float: left;width: 100%;margin-left: 59px;margin-top: 51px;">
        <img src="../../assets/risk.png" style="margin-right: 12px;width: 20px;margin-top: -3px;"><span>风险程度</span><span
        style="margin-left: 36px;color: #08e703">低风险</span>
      </div>
    </div>
    <div class="line"><img src="../../assets/line2.png" alt=""></div>
    <div class="dt-form">
      <div>
        <label>定投类型</label>
        <select id="type" v-model="putinType">
          <option value="day">日</option>
          <option value="week">周</option>
          <option value="month">月</option>
        </select>
      </div>
      <div>
        <label>定投周期</label>
        <select v-model="cycle" v-if="putinType==='day'">
          <option :value="index" v-for="(item,index) in 366" v-if="index>0">{{index}}日</option>
        </select>
        <select v-model="cycle" v-if="putinType==='week'">
          <option :value="index" v-for="(item,index) in 53" v-if="index>0">{{index}}周</option>
        </select>
        <select v-model="cycle" v-if="putinType==='month'">
          <option :value="index" v-for="(item,index) in 13" v-if="index>0">{{index}}月</option>
        </select>
      </div>
      <div>
        <label>定投克数</label>
        <input type="text" v-model="weight" class="weight">
      </div>
      <div>
        <label>起投时间</label>
        <datepicker language="zh" :value="startTime" format="yyyy-MM-dd"></datepicker>
      </div>
      <div class="server">
        <img :src="_parentThis.serverIsTrue?require('../../assets/true.png'):require('../../assets/false.png')"
             @click="agreed"
             style="margin-right: 20px;margin-top: -4px;cursor: pointer"><span>同意</span><span
        class="server-text" @click="showServer">《服务协议》</span>
      </div>
      <button class="btn" :disabled="!_parentThis.serverIsTrue" @click="dingtouConfirm">确定定投</button>
    </div>
  </div>
</template>
<script>
  import Datepicker from 'vuejs-datepicker'
  import moment from 'moment'
  export default {
    components: {
      Datepicker
    },
    props: ['_parentThis', 'dingtouData'],
    data: function () {
      return {
        startTime: new Date(),
        cycle: 1,
        putinType: 'day',
        weight: '0.1',
        endTime: ''
      }
    },
    methods: {
      agreed: function () {
        this._parentThis.serverIsTrue = !this._parentThis.serverIsTrue
      },
      showServer: function () {
        this._parentThis.showServerAgreement = !this._parentThis.showServerAgreement
      },
      dingtouConfirm: function () {
        var unit = 0
        switch (this.putinType) {
          case 'day':
            unit = this.cycle
            break
          case 'week':
            unit = this.cycle * 7
            break
          case 'month':
            unit = this.cycle * 30
            break
        }
        var temp = Date.parse(new Date(this.startTime))
        temp = temp + unit * 3600 * 24 * 1000
        var mydate = new Date()
        mydate.setTime(temp)
        var mymonth, myday
        if ((mydate.getMonth() + 1) < 10) {
          mymonth = '0' + (mydate.getMonth() + 1)
        } else {
          mymonth = mydate.getMonth() + 1
        }
        if (mydate.getDate() < 10) {
          myday = '0' + mydate.getDate()
        } else {
          myday = mydate.getDate()
        }
        this.endTime = mydate.getFullYear() + '-' + mymonth + '-' + myday
        if (!/[0-9]+(.[0-9]{1})?/.test(this.weight)) {
          this._parentThis.notifyStatus = '0|数据格式不正确，最多保留一位小数。例如：10.1'
          return
        } else {
          if (this.weight.indexOf('.') > -1 && this.weight.substring(this.weight.indexOf('.') + 1).length > 1) {
            this._parentThis.notifyStatus = '0|数据格式不正确，最多保留一位小数。例如：10.1'
            return
          }
        }
        if (parseFloat(this.weight) < 0 || parseFloat(this.weight) === 0) {
          this._parentThis.notifyStatus = '0|起投最低为0.1g!'
          return
        }
        var orderDingDouObj = {
          productName: this.dingtouData.productName,
          startTime: moment(this.startTime).format('YYYY-MM-DD'),
          cycle: this.cycle,
          putinType: this.putinType,
          weight: this.weight * 1000,
          putinId: this.dingtouData.id,
          endTime: this.endTime
        }
        this.$cookie.set('order_dingtouObj', JSON.stringify(orderDingDouObj))
        window.open('orderConfirm/dt')
      }
    }
  }
</script>

<style>
  @import '../../scss/home.scss';

</style>
